<template>
  <div>
    <div>
      <List header="attrs 与 listeners" border>
        <ListItem>现在我们来讨论一种情况， 我们一开始给出的组件关系图中A组件与D组件是隔代关系， 那它们之前进行通信有哪些方式呢？</ListItem>
        <ListItem>使用props绑定来进行一级一级的信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一级级往上传递</ListItem>
        <ListItem>使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低, 可读性也低</ListItem>
        <ListItem>使用Vuex来进行数据管理, 但是如果仅仅是传递数据, 而不做中间处理,使用Vuex处理感觉有点大材小用了.</ListItem>
        <ListItem>在vue2.4中，为了解决该需求，引入了attr和listeners ， 新增了inheritAttrs 选项。 在版本2.4以前，默认情况下,父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)，将会“回退”且作为普通的HTML特性应用在子组件的根元素上</ListItem>
      </List>
    </div>
    <div>
      <child-com1 :name="name" :age="age" :gender="gender" :height="height" title="程序员成长指北"></child-com1>
    </div>
  </div>
</template>
<script>
const childCom1 = () => import("./childCom1.vue");
export default {
  components: { childCom1 },
  data() {
    return {
      name: "zhang",
      age: "25",
      gender: "男",
      height: "180"
    };
  }
};
</script>
<style scoped>
ul {
  margin-left: 24px;
}
p {
  font-size: 16px;
}
</style>